<template>
  <div class="login">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">后台管理系统</h3>
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          type="text"
          auto-complete="off"
          placeholder="账号"
        >
        <i slot="prefix"  class="el-input__icon el-icon-user"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="handleLogin"
        >
         <i slot="prefix" class="el-input__icon el-icon-lock"></i>
        </el-input>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <div class="el-login-footer">
      <span>版权号</span>
    </div>
  </div>
</template>
<script>
import { login,getUserInfo } from '@/api/login';
import {  setRole, setToken,setUserInfo } from '@/utils/auth';
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" }
        ],
      },
      loading: false,
    };
  },

  methods: {
    handleLogin(){
        login(this.loginForm).then(res=>{
            if(res.status === 0){
                // 当用户身份为管理员、老板、审批员时，才有可能登入后台页面，
                if(res.role === 0 || res.role === 1){
                  setToken(res.token)
                    getUserInfo().then(res=>{
                      if(res.status === 0){
                        setUserInfo(JSON.stringify(res.data))
                        setRole(res.data.role)
                        this.$router.push('/user')
                      }
                    })
                   
                }else if(res.role === 2){
                  setToken(res.token)
                    getUserInfo().then(res=>{
                      if(res.status === 0){
                        console.log(res);
                        setUserInfo(JSON.stringify(res.data))
                        setRole(res.data.role)
                        this.$router.push('/approverInfo')
                      }
                    })
                    
                }else{
                  setToken(res.token)
                  getUserInfo().then(res=>{
                      if(res.status === 0){
                        setUserInfo(JSON.stringify(res.data))
                        setRole(res.data.role)
                        this.$router.push('/404')
                      }
                    })
                  
                }
                
            }
        })
    }
  },
}
</script>
<style lang='less' scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("@/assets/login/login-background.jpg");
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 250px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 38px;
}
</style>